<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>swiper.js</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/swiper.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
    <script src="http://cdn.66173.cn/mobile/v2/scripts/qrcode.min.js"></script>
    <style type="text/css">
        .jjjj{
            width:200px!important;height:40px;line-height: 40px;
            margin: 0px auto;
        }
        .kkk{
            width:40px;
            height:40px;
        }
        .swiper-container{/*把主要的框写好*/
            width:800px;
            height:400px;
            border:1px solid #aaa;
        }
        .swiper-slide{/*轮播的内容*/
            width:100%;
            height:100%;
            text-align: center;
            line-height: 400px;
        }
        .swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/
            width:30%;
            height:30px;
            display: flex;
            margin-top:260px;margin-left:300px;

        }
        .swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/
            color:#808080;
            /*background-color: transparent;*/
        }
        .swiper-pagination-bullet{/*这个是小圆点的样式*/
             background-color:transparent;
            z-index: 999!important;
            -webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/
            text-align: center;
            line-height: 30px;
            width: 30px;
            height: 10px!important;
            border-radius:5px;/*把小圆点重新设置为矩形*/
            color:#000000;
        }
        .swiper-pagination-bullet:nth-child(1){/*在元素的内容之前插入新内容;*/
         background-color:#ffc120;color: rgba(1, 1, 1, 0.9);
            width: 30px;height: 10px!important;
            content: "111";
        }
        .swiper-pagination-bullet:nth-child(2){
         background-color:#ffc120;color: rgba(1, 1, 1, 0.9); width: 30px;height: 10px!important;
            content: "222";
        }
        .swiper-pagination-bullet:nth-child(3){
        background-color: #ffc120;color: rgba(1, 1, 1, 0.9); width: 30px;height: 10px!important;
            content: "333";
        }
        .swiper-pagination-bullet:nth-child(4){
      background-color:#ffc120;color: rgba(1, 1, 1, 0.9); width: 30px;height: 10px!important;
            content: "444";
        }
        .swiper-pagination-bullet:nth-child(5){
      background-color:#ffc120;color: rgba(1, 1, 1, 0.9); width: 30px;height: 10px!important;
            content: "555";
        }
        .pre-btn{
            width: 40px;height:60px;background-color: #b71553;z-index: 99999;margin-top: -255px;position:relative;
            font-size: 44px;color: #fffaf1;line-height: 60px;text-align: center;
        }
        .next-btn{
            width: 40px;height:60px;background-color: #b71553;z-index: 99999;margin-top: -63px;position:relative;
            font-size: 44px;color: #fffaf1;margin-left:760px;line-height: 60px;text-align: center;
        }
    </style>
</head>
<body>
<div class="swiper-container2" style="width:720px;height: 400px">
    <div class="swiper-wrapper" style="width: 720px;height: 400px">
        <div class="swiper-slide" style="width:720px;height: 400px">
            <img style="width: 100%;height:400px" src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data1.png" alt="" />
        </div>
        <div class="swiper-slide" style="width: 1200px;height: 400px"><img style="width: 100%;height:400px" src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data2.png" alt="" /></div>
        <div class="swiper-slide" style="width: 1200px;height: 400px"><img style="width: 100%;height:400px" src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data3.png" alt="" /></div>
        <div class="swiper-slide" style="width: 1200px;height: 400px"><img style="width: 100%;height:400px" src="http://cdn.66173.cn/mobile/css/img/yhwz_pc/img_data4.png" alt="" /></div>

    </div>
    <div class="pre-btn">《</div>
    <div class="next-btn">》</div>
    <div class="swiper-pagination swiper-pagination-bullets jjjj">
        <span class="swiper-pagination-bullet swiper-pagination-bullet-active kkk"></span>
        <span class="swiper-pagination-bullet kkk"></span>
        <span class="swiper-pagination-bullet kkk"></span>
        <span class="swiper-pagination-bullet kkk "></span>
    </div>
</div>

</div>
<div id="qrcode" style="width: 400px;height: 400px"></div>
</body>
</html>

<script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), window.location.href);
</script>
<!--<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
    window.onload = function(){
        var swiper = new Swiper(".swiper-container2", {
            prevButton:'.pre-btn',
            nextButton:'.next-btn',
            pagination: ".swiper-pagination",//显示小圆点
            autoplay:2000,                     //轮播毫秒数
            loop:true,                         //可以重复轮播，默认方式是false
            paginationClickable: true,         //值为真时，当单击指示器时会执行过渡动画到目标slide
            speed:300,                         //slides滑动动画之间的持续时间
            autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay
//            mode:'horizontal',                 //slides滑动方式，水平或垂直
        });
    }

</script>